<template>
<!--微博数据渲染-->
  <div style="margin-top: 0.5%" v-if="showFrom">
    <el-card :body-style="{paddingBottom:'0px'}">
      <el-row>
        <el-col span="3">
          <el-avatar style="float: left;"
                     :src=blog.authorIcon>
          </el-avatar>
        </el-col>
        <el-col span="15">
          <b id="name" style="float: left" @click="showUser">{{ blog.authorNickname }}</b>
          <br>
          <br>
          <i style="float: left">{{ blog.deployTime }}</i>
          <br>
          <i style="float: left">来自-{{ blog.address }}</i>
        </el-col>
        <el-col span="6">
<!--用于展示用户的删改操作-->
          <div class="user">
            <el-select v-if="location === '4-1'" v-model="select" clearable placeholder="" >
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @click="">
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
<!--  博客标题    -->
      <b style="float: left;margin-left: 12%;margin-top: 3%">{{ blog.tittle }}</b>
      <br>
<!--  博客正文    -->
      <div class="miaoshu"
           style="word-wrap: break-word;overflow-wrap: break-word;white-space: pre-wrap;font-size: small;font-family:'Hiragino Sans GB'; text-align: left;margin-top: 5%;margin-left: 12%">
            {{ blog.content }}
      </div>
<!--  图片渲染 -->
      <div style="margin-top: 3%" v-if="blog.images != null">
        <el-row style="margin-left: 12%">
          <el-col span="8" v-for="image in blog.images" style="width: 165px;margin-top: 1%">
            <el-card :body-style="{padding:'0px'}" style="width: 145px;height:145px; border-radius: 10px; margin-left: 1%">
              <el-image
                  style="width: 145px;height: 145px"
                  fit="fill"
                  :src="image.url"
                  :preview-src-list="imageList"
                  @click="vb(image.url)"
              >
              </el-image>
            </el-card>
          </el-col>
        </el-row>
      </div><br><br>
<!-- 视频渲染 -->
     <div v-if="blog.videos.length != 0">
        <div>
          <video-player
              class="video-player vjs-custom-skin"
              ref="videoPlayer"
              :playsinline="true"
              :options=blog.player
          >
          </video-player>
        </div>
      </div>
      <br>
      <br>
<!--评论点赞-->
      <Review :likeNum=blog.likes :blogID=blogID :userId="blog.authorId" :isLiked="blog.isLiked"/>
    </el-card>
  </div>
</template>

<script>
import Review from '@/components/proscenium/review'
import {getBlog} from "@/api/api";
import {getSession,setSession} from "@/utils/Token";

export default {
  name: "blog_list",
  props: ['blogID'],
  components: {
    Review
  },
  data() {
    return {
      /*数据渲染问题*/
      showFrom: false,
      /*大图展示*/
      imageList:[
        'http://10.1.188.122:8081/weibo/DwWbnB0g.png',
      ],
      /*博客正文*/
      blog:{},
      /*选择*/
      options: [{
        value: '选项1',
        label: '修改'
      }, {
        value: '选项2',
        label: '删除'
      }],
      select: '',
      location:getSession('group_index')
    }
  },
  methods:{
    /*将点击的图片进行大图展示*/
    vb(url){
      this.imageList = []
      this.imageList.push(url)
    },
    /*用于展示每个用户个人页面*/
    showUser(){
      setSession('restUser',this.blog.authorId);
      if(getSession('index') === '1'){
        this.$router.push('/main/user');
      }else {
        this.$router.push('/heat/user');
      }
    }
  },
  /*创建是进行异步请求*/
  created(){
   getBlog(this.blogID).then((res)=>{
     if(res.data.status === 200){
       this.blog= res.data.data;
       if(this.blog.videos.length != 0){
         let playerOptions = {
           sources: [
             {
               type: "video/mp4", // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
               src: res.data.data.videos[0].url
             }
           ],
           playbackRates: [0.5, 1.0, 1.5, 2.0], // 播放速度
           autoplay: false, // 如果true,浏览器准备好时开始回放。
           muted: false, // 默认情况下将会消除任何音频。
           loop: false, // 导致视频一结束就重新开始。
           preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
           language: "zh-CN",
           aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
           fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
           notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
           controlBar: {
             timeDivider: true,
             durationDisplay: true,
             remainingTimeDisplay: false,
             fullscreenToggle: true // 全屏按钮
           }
         };
         this.blog.player = playerOptions;
       }
       this.showFrom = true;
     }
   })
 },
}
</script>

<style>
.user .el-input__inner{
  border: 0px solid #DCDFE6 !important;
}
#name:hover {
  color: #409EFF;
}

.miaoshu {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.miaoshu:active {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 100;
}
</style>